<!--
 * @Author: libing 9852442+liu-sheng-8667@user.noreply.gitee.com
 * @Date: 2024-04-10 23:24:56
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2025-04-14 22:47:52
 * @FilePath: \crm\pages\my\my-info.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <view class="my-info">
    <view class="wrap">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="item"
        @click="go(item)"
      >
        <view class="item-label">{{ item.label }}</view>
        <view
          class="item-value"
          v-if="(item.prop && userInfo[item.prop]) || item.value"
        >
          {{ item.prop ? userInfo[item.prop] : item.value }}</view
        >
        <u-icon name="arrow-right" v-else color="#171A1D" size="20"></u-icon>
      </view>
    </view>
    <!--  -->
    <view class="btn-wrap">
      <u-button
        type="primary"
        size="large"
        text="退出登录"
        color="#DC2626"
        @click="loginOut"
      ></u-button>
    </view>
    <u-popup
      :show="showfalg"
      mode="bottom"
      width="500rpx"
      closeable
      @close="close"
    >
      <view style="width: 750rpx; height: 460px">
        <div style="line-height: 40px; text-align: center">修改密码</div>
        <uni-forms
          ref="baseForm"
          :modelValue="formData"
          :rules="rules"
          label-position="left"
          label-width="100px"
        >
          <view class="forms-item-wrap">
            <uni-forms-item label="原密码" name="password" :required="true">
              <input
                type="password"
                trim="all"
                v-model="formData.password"
                placeholder="请输入原密码"
                :inputBorder="false"
                placeholder-class="placeholder_class"
              />
            </uni-forms-item>
            <uni-forms-item label="新密码" name="newpassword1" :required="true">
              <input
                type="password"
                trim="all"
                v-model="formData.newpassword1"
                placeholder="请输入新密码"
                :inputBorder="false"
                placeholder-class="placeholder_class"
              />
            </uni-forms-item>
            <uni-forms-item
              label="确认密码"
              name="newpassword2"
              :required="true"
            >
              <input
                type="password"
                trim="all"
                v-model="formData.newpassword2"
                placeholder="请输入确认密码"
                :inputBorder="false"
                placeholder-class="placeholder_class"
              />
            </uni-forms-item>
          </view>
        </uni-forms>
        <u-button
          @click="submit"
          type="primary"
          size="large"
          color="#DC2626"
          :customStyle="style"
          >确定</u-button
        >
      </view>
    </u-popup>
    <u-popup
      :show="showfalg1"
      mode="bottom"
      width="500rpx"
      closeable
      @close="close"
    >
      <view style="width: 750rpx; height: 460px">
        <div style="line-height: 40px; text-align: center">更换手机号</div>
        <uni-forms
          ref="baseForm1"
          :modelValue="formData1"
          :rules="rules1"
          label-position="left"
          label-width="100px"
        >
          <view class="forms-item-wrap">
            <uni-forms-item label="手机号" name="phone" :required="true">
              <input
                type="number"
                trim="all"
                :maxlength="11"
                v-model="formData1.phone"
                placeholder="请输入手机号"
                :inputBorder="false"
                placeholder-class="placeholder_class"
              />
            </uni-forms-item>
          </view>
        </uni-forms>
        <u-button
          @click="submit1"
          type="primary"
          size="large"
          color="#DC2626"
          :customStyle="style"
        >
          确定
        </u-button>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { getUserInfo } from "@/config/storage";
import { logout, password, editInfo } from "@/apis/user";
import { getUserInfo as reqUserInfo } from "@/apis/user";
export default {
  name: "my-info",
  data() {
    return {
      userInfo: {},
      list: [
        {
          label: "姓名",
          prop: "name",
          value: "",
        },
        {
          label: "联系方式",
          prop: "phone",
          value: "",
        },
        {
          label: "职位",
          value: "业务员",
        },
        {
          label: "修改密码",
          value: "",
        },
        {
          label: "更换手机号",
          value: "",
        },
      ],
      style: {
        margin: "0 20px",
        width: "auto",
      },
      showfalg: false,
      showfalg1: false,
      formData: {},
      rules: {
        password: {
          rules: [
            {
              required: true,
              errorMessage: "请输入原密码",
            },
          ],
        },
        newpassword1: {
          rules: [
            {
              required: true,
              errorMessage: "请输入新密码",
            },
          ],
        },
        newpassword2: {
          rules: [
            {
              required: true,
              errorMessage: "请输入确认密码",
            },
          ],
        },
      },
      formData1: {},
      ruels1: {
        phone: {
          rules: [
            {
              required: true,
              errorMessage: "请输入手机号",
            },
            {
              minLength: 11,
              maxLength: 11,
              errorMessage: "请输入正确的手机号",
            },
          ],
        },
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    go(item) {
      if (item.label === "修改密码") {
        this.showfalg = true;
      } else if (item.label === "更换手机号") {
        this.showfalg1 = true;
      }
    },
    async submit() {
      const valid = await this.$refs.baseForm.validate();
      if (!valid) return;
      await password(this.formData);
      this.common();
    },
    async submit1() {
      const valid = await this.$refs.baseForm1.validate();
      if (!valid) return;
      await editInfo(this.formData);
      uni.showToast({
        title: "操作成功",
        icon: "none",
        duration: 2000,
      });
      const res = await reqUserInfo();
      setUserInfo(res.sysUser);
      this.userInfo = res.sysUser;
    },
    close() {
      this.showfalg = false;
      this.showfalg1 = false;
    },
    common() {
      uni.showToast({
        title: "操作成功",
        icon: "none",
        duration: 2000,
      });
      uni.clearStorageSync();
      setTimeout(() => {
        uni.reLaunch();
        uni.navigateTo({
          url: "/pagesCalendar/login/login",
        });
      }, 2000);
    },
    init() {
      const userInfo = getUserInfo();
      this.userInfo = userInfo;
    },
    loginOut() {
      uni.showModal({
        title: "提示",
        content: "确认退出登录吗？",
        success: async (res) => {
          if (res.confirm) {
            try {
              await logout();
            } catch (error) {}
            uni.clearStorageSync();
            uni.reLaunch();
            uni.navigateTo({
              url: "/pagesCalendar/login/login",
            });
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.my-info {
	background: #F2F4F5;
	min-height: 100vh;
	padding-top: 20rpx;
}

.wrap {
	background: #FFFFFF;
	padding: 0 40rpx;

	.item {
		height: 99rpx;
		line-height: 99rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #E9EBEC;

		&-label {
			font-size: 30rpx;
			color: #171A1D;
		}

		&-value {
			font-size: 28rpx;
			color: #171A1D;
		}

		&:last-child {
			border-bottom: none;
		}
	}

}

.btn-wrap {
	padding: 22rpx 32rpx;
	background: #FFFFFF;
	position: fixed;
	bottom: 0;
	width: 100%;
	padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
}
</style>
